<template>
  <div id="banner">
    <div class="indexBanner">
      <ul class="default" v-if="BannerList.length">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <!-- <ul v-else>
        <li v-for="banner in BannerList" :style="{backgroundImage:'url(../../assets/img/banner/'+banner.imgName+')'}"></li>
      </ul> -->
    </div>
  </div>
</template>
<script type="text/javascript">
import { BannerList } from '@/assets/js/data.js'
import '@/assets/js/unslider.min.js'
$(function() {
  $('.indexBanner').unslider({
    fluid: true,
    speed: 500,
    delay: 2500,
    dots: true
  });
})
export default {
  data() {
    return {
      BannerList: BannerList
    }
  },
  mounted() {
    let banners = this.BannerList;

  }
}

</script>
<style scoped>
.indexBanner>ul {
  height: 100%;
  display: block;
  overflow: hidden;
}

.indexBanner>ul>li {
  width: 100%
}

.indexBanner>ul.default>li:nth-child(1) {
  background: url(~@/assets/img/banner/banner1.png)
}

.indexBanner>ul.default>li:nth-child(2) {
  background: url(~@/assets/img/banner/banner2.jpg)
}

.indexBanner>ul.default>li:nth-child(3) {
  background: url(~@/assets/img/banner/banner7.jpg)
}

.indexBanner>ul.default>li:nth-child(4) {
  background: url(~@/assets/img/banner/banner8.jpg)
}

.indexBanner>ul.default>li:nth-child(5) {
  background: url(~@/assets/img/banner/banner6.jpg)
}

.indexBanner>ul.default>li:nth-child(6) {
  background: url(~@/assets/img/banner/banner5.jpg)
}

</style>
